<template>
    <div class="wrap">
        <div id="container">
            <!-- 定义一个表格元素 -->
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class="">异常告警</h5>
                </div>
            </section>
            <section class="searchBar">
                <div class="form-inline">
                    <div class="pull-left">
                        <div class="searchSel">
                          <el-select v-model="domain" filterable  placeholder="模块" @change="changeDomain(domain)">
                            <el-option label="全部" ></el-option>
                            <el-option v-for="item in domains" key="index" :label="item.name" :value="item.name" ></el-option>
                          </el-select>
                        </div>
                        <div class="searchSel">
                          <el-select v-model="msgType" filterable  placeholder="类型" @change="changeType(msgType)">
                              <el-option label="全部" ></el-option>
                              <el-option v-for="item in msgTypes" key="index" :label="item.label" :value="item.value"></el-option>
                          </el-select>
                        </div>
                        <div class="searchSel">
                            <el-date-picker @change="pickTime" v-model="time" type="datetimerange" placeholder="选择时间范围"></el-date-picker>
                        </div>
                    </div>
                </div>
            </section>
            <section class="tableMain">
                <el-table :data="dataArr" border style="width: 100%">
                    <el-table-column prop="createTime" label="告警时间" :formatter="formatTime"> </el-table-column>
                    <el-table-column prop="module" label="告警模块" > </el-table-column>
                    <el-table-column prop="msgType" label="告警类型"> </el-table-column>
                    <el-table-column prop="context" label="内容" > </el-table-column>
                </el-table>
                <div class="pageSIzeblock">
                    <div class="pullright">
                        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
                        </el-pagination>
                    </div>
                </div>
            </section>
            
        </div>
    </div>
</template>
<script>
import { getList, getDomains } from '@/api/alarmshistoryData'
import { parseTime } from '@/utils/index'
export default {
  data() {
    return {
      dataArr: [],
      currPage: 1,
      pageSize: 10,
      totalCount: 0,
      msgType: null,
      domains: [],
      domain: null,
      time: '',
      startTime: null,
      endTime: null,
      msgTypes: [{
        value: 'IP异常报警',
        label: 'IP异常报警'
      }, {
        value: '运行指标大屏告警',
        label: '运行指标大屏告警'
      }, {
        value: '核心交易大屏告警',
        label: '核心交易大屏告警'
      }, {
        value: '异常告警',
        label: '异常告警'
      }]
    }
  },
  created() {
    this.getList(1)
    this.getDomains()
  },
  methods: {
    getList(currPage) {
      this.currPage = currPage
      var listQuery = { currPage: this.currPage, pageSize: this.pageSize }
      getList(listQuery).then(response => {
        this.dataArr = response.data.data
        this.totalCount = response.data.totalRows
      }).catch(_ => {
      })
    },
    getDomains() {
      var listQuery = { }
      getDomains(listQuery).then(response => {
        this.domains = response.data.data
      }).catch(_ => {
      })
    },
    changeDomain(domain) {
      var listQuery = { currPage: this.currPage, pageSize: this.pageSize, module: domain, msgType: this.msgType, startTime: this.startTime, endTime: this.endTime }
      getList(listQuery).then(response => {
        this.dataArr = response.data.data
        this.totalCount = response.data.totalRows
      }).catch(_ => {
      })
    },
    changeType(msgType) {
      var listQuery = { currPage: this.currPage, pageSize: this.pageSize, module: this.domain, msgType: msgType, startTime: this.startTime, endTime: this.endTime }
      getList(listQuery).then(response => {
        this.dataArr = response.data.data
        this.totalCount = response.data.totalRows
      }).catch(_ => {
      })
    },
    formatTime(row, column) {
      if (row.createTime) {
        return parseTime(row.createTime)
      }
      return ''
    },
    handleCurrentChange(val) {
      this.getList(val)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList(1)
    },
    pickTime(val) {
      this.startTime = val.split(' - ')[0]
      this.endTime = val.split(' - ')[1]
      var listQuery = { currPage: this.currPage, pageSize: this.pageSize, module: this.domain, msgType: this.msgType, startTime: this.startTime, endTime: this.endTime }
      getList(listQuery).then(response => {
        this.dataArr = response.data.data
        this.totalCount = response.data.totalRows
      }).catch(_ => {
      })
    }
  }
}
</script>


<style lang="scss">
.el-table .warning-row {
    background: #dd9999;
}
.el-table .info-row {
    background: #c9e5f5;
}
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
            .refresh{
                float: left;
                margin-right: 10px;
                color: #333;
                border: 1px solid #ddd;
                background-color: #F7F7F7;
            }
            .creatSite{
                float: left;
            }
        }
    }
}
.searchSel{
    width: 150px;
    display: inline-block;
}
.searchIpt{
    width: 350px;
    display: inline-block;
}
.searchbtn{
    width: 100px;
    display: inline-block;
}
.searchBar{
    padding: 0 10px;
}
.tableMain{
    padding: 10px;
}
.typeform{
    display: inline;
    .form-control{
        border: none;
        padding: 0;
        box-shadow:none;
        display: inline;
        height:30px;
        width:60%;
    }
}
.spantype{
    display: inline;
}
.pageSIzeblock{
    overflow: hidden;
    padding: 10px 0;
    .pullright{
        float: right;
    }
}

.aar-gap-line{height:0;border-bottom:1px dotted #888888;display:inline-block;width:100%;}
.aar-gap-index{background:#0099cc;position:absolute;left:0;top:0;width:40px;height:40px;color:#fff;border-radius:20px;text-align:center;line-height:40px;}
.aar-gap{position:relative;height:50px;}
.aar-gap-title{margin-left:15px;font-weight:bold;font-size:20px;position:absolute;left:40px;top:12px;background:#fff;padding-right:8px;}
.aar-gap-line-c{height:40px;margin:0 0 0 120px;line-height:38px}
.aar-gap-line-b{height:40px;line-height:38px}
.instanceTypeClass .el-select{width:800px;}
.delBtn{font-weight:bold;font-size:13px;position:absolute;right:0px;top:8px;background:#fff;}
</style>


